import { FC, useState, ChangeEvent } from 'react';
import { Input, Button } from 'antd';
import { useDispatch } from 'umi';

const Form: FC = () => {
  const [textValue, setTextValue] = useState<string>('');
  const dispatch = useDispatch();

  const fn = (e: ChangeEvent<HTMLInputElement>): void => {
    setTextValue(e.target.value);
  };

  const add = (): void => {
    // console.log(textValue);
    dispatch({
      type: 'todolist/addData',
      title: textValue,
    });
    setTextValue('');
  };

  return (
    <>
      <Input style={{ width: 200 }} value={textValue} onChange={fn} />
      <Button type="primary" onClick={add}>
        添加
      </Button>
    </>
  );
};

export default Form;
